<template>
  <div class="mainos">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>台账详情</span>
          </div>
          <!-- <div class="main_crumbs_rt box">
						<div v-if="info.info.order_status != 4">
							<el-button @click="quit" v-repeatClick v-if="info.info.order_status == 2 || info.info.order_status == 3
								">退货</el-button>

							<el-button v-repeatClick v-if="info.info.order_status == 2" @click="successClick"
								class="marginLeft5">完成</el-button>
							<el-button v-repeatClick v-if="info.info.order_status == 0 || info.info.order_status == 1
								" @click="order_splitCate(), (splitVisible = true)" class="marginLeft5">拆分</el-button>
							<router-link :to="'/order/list/check/' + this.id" v-if="info.info.order_status == 2">
								<el-button v-repeatClick class="marginLeft5" v-if="info.info.order_status != 2">验收</el-button>
							</router-link>
							<router-link :to="'/order/list/add/' + this.id + '?uid=' + info.info.uid">
								<el-button v-repeatClick class="marginLeft5">复制</el-button>
							</router-link>
							<el-button v-repeatClick class="marginLeft5" @click="print">打印</el-button>
							<el-button v-repeatClick @click="exportOrderiInfo">导出</el-button>
						</div>
					</div> -->
        </div>
        <div @click="mainor_ex = false" v-loading="loading">
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>订单详情</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                订单号：<span>{{ info.info.order_sn }}</span>
              </li>
              <li>
                档口名称：<span>{{ info.info.member.nickname }}</span>
                <!-- <span v-if="info.info.zid_info">【{{
									info.info.zid_info.nickname }}】
								</span> -->
              </li>
              <li>
                收货人信息：<span>{{
                  info.info.contact +
                  " " +
                  info.info.mobile +
                  " " +
                  info.info.address
                }}</span>
              </li>
              <li>
                订单来源：<span>{{ info.from[info.info.from] }}</span>
              </li>
              <li>
                下单日期：<span>{{
                  parseTime(info.info.created_at, "{y}-{m}-{d}")
                }}</span>
              </li>
              <li>
                配送日期：<span
                  >{{ parseTime(info.info.send_time, "{y}-{m}-{d}") }}
                  {{ info.send_time[info.info.send_time_id] }}</span
                >
              </li>
              <li>
                订单状态：<span>{{
                  info.order_status[info.info.order_status]
                }}</span>
              </li>
              <li>
                司机：<span>{{
                  info.info.driver ? info.info.driver.name : "暂无"
                }}</span>
              </li>
              <li class="main_w100">
                订单备注：<span>{{ info.info.remark || "暂无" }}</span>
              </li>
            </ul>
          </div>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.info.order_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              :summary-method="getSummaries"
              show-summary
              border
            >
              <el-table-column label="序号" prop="userId" width="80">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="name"
                class-name="main_hei"
              />
              <el-table-column label="单位" prop="unit" class-name="main_hei" />
              <el-table-column
                label="下单数量"
                prop="order_num"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div style="color: #e6a23c">
                    {{ scope.row.order_num }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="配送数量"
                prop="sort_num"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div style="color: red">
                    {{ scope.row.sort_num }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                label="退货数量"
                prop="real_num"
                class-name="main_hei"
              />
              <el-table-column
                label="备注"
                prop="remark"
                class-name="main_hei"
                width="200"
              >
                <template slot-scope="scope">
                  {{ scope.row.remark || "暂无" }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="main_tile boxdq marginTop20">
						<div class="main_tile_l marginLeft0"><em></em>结算记录</div>
					</div>
					<div class="main_table marginTop0 settlement">
						<el-table ref="multipleTable" v-loading="listLoading" :data="settlement_logs" element-loading-text="加载中" fit
							highlight-current-row max-height="205">
							<el-table-column label="结算单号" prop="new_order_sn" class-name="main_hei">
								<template slot-scope="scope">
									{{ scope.row.new_order_sn }}
									<i class="el-icon-document-copy set_default" style="margin-left: 10px"
										@click="handleCopy(scope.row)"></i>
								</template>
							</el-table-column>
							<el-table-column label="单据类型" prop="operate" class-name="main_hei">
								<template slot-scope="scope">
									<span :class="'type' + scope.row.type">
										{{ scope.row.type == 1 ? "订单" : "退货单" }}
									</span>
								</template>
							</el-table-column>
							<el-table-column label="结算时间" prop="created_at" class-name="main_hei">
								<template slot-scope="scope">{{
									parseTime(scope.row.created_at)
								}}</template>
							</el-table-column>
						</el-table>
					</div> -->
          <div class="main_tile boxdq marginTop20">
            <div class="main_tile_l marginLeft0"><em></em>生命周期</div>
          </div>
          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.logs"
              element-loading-text="加载中"
              fit
              highlight-current-row
            >
              <el-table-column
                label="管理员"
                prop="admin.name"
                class-name="main_hei"
              />
              <el-table-column
                label="操作"
                prop="operate.name"
                class-name="main_hei"
              />
              <el-table-column
                label="内容"
                prop="content"
                class-name="main_hei"
              >
                <template slot-scope="scope">
                  <div
                    v-for="(content, index) in scope.row.content"
                    :key="index"
                    class="marginTop5 marginBottom5"
                  >
                    {{ content }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="IP" prop="ip" class-name="main_hei" />
              <el-table-column
                label="时间"
                prop="created_at"
                class-name="main_hei"
              >
                <template slot-scope="scope">{{
                  parseTime(scope.row.created_at)
                }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <div :class="[{ on: mainor_ex }, ' mainor_ex']">
        <div class="mainor_exb">
          <h3>表头设置</h3>
          <div class="mainor_exb_an">
            <el-checkbox-group v-model="type">
              <el-checkbox
                v-for="(Header, index) in Header"
                :key="index"
                :label="Header.id"
                :disabled="Header.disabled"
                >{{ Header.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="mainor_exb_b">
          <el-button type="primary" @click="determine" v-repeatClick
            >确定</el-button
          >
          <el-button @click="recovery" v-repeatClick>恢复</el-button>
          <el-button @click="mainor_ex = false">取消</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="拆分"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="splitVisible"
      class="main_dialog dialog500"
    >
      <el-checkbox-group v-model="split_chec">
        <el-checkbox
          v-for="(split_sh, index) in split_sh"
          :key="index"
          :label="split_sh.id"
          :disabled="index == 0 ? true : false"
          >{{ split_sh.title }}</el-checkbox
        >
      </el-checkbox-group>

      <div slot="footer" class="dialog-footer">
        <el-button @click="splitVisible = false">取 消</el-button>
        <el-button type="primary" @click="split" v-repeatClick>确 定</el-button>
      </div>
    </el-dialog>

    <order-print
      ref="printTemplate"
      v-show="false"
      id="printname"
    ></order-print>
  </div>
</template>

<script>
import {
  order_info,
  order_merge,
  order_splitCate,
  order_setOrderStatus,
  order_split,
  order_info_detail,
} from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, exportMethod, copyToClipboard } from "@/utils/index";
import { field_save } from "@/api/currency";
import { orderListSeeHeader } from "@/options/headerSet.js";
import OrderPrint from "@/views/order/orderPrint.vue";
import { roundFloat } from "@/utils/math.js";
import TraceabilityCard from "@/components/TraceabilityCard/index";
export default {
  computed: {
    total() {
      let order = 0;
      let send = 0;
      let real_num = 0;
      let real_money = 0;
      this.info.info.order_list.forEach((e) => {
        console.log(e);
        order += Number(this.$toFixed(parseFloat(e.order_num)));

        send += Number(this.$toFixed(parseFloat(e.sort_num)));
        real_money += Number(this.$toFixed(parseFloat(e.real_money)));
        real_num += Number(this.$toFixed(parseFloat(e.real_num)));
      });
      let obj = {
        order: this.$toFixed(order),
        send: this.$toFixed(send),
        real_num: this.$toFixed(real_num),
        real_money: this.$toFixed(real_money),
      };
      return obj;
    },
  },
  components: {
    OrderPrint,
    TraceabilityCard,
  },
  data() {
    return {
      roundFloat,
      // 拆分
      splitVisible: false,
      split_sh: [],
      split_chec: [],

      // 时间
      parseTime,
      exportMethod,
      // 基本信息
      info: {},
      activity_type_list: [],
      listLoading: false,
      // id
      id: this.$route.params.id,
      uid: "",
      // 表头设置
      mainor_ex: false,
      type: [],
      Header: orderListSeeHeader,
      loading: false,
      // 结算记录
      settlement_logs: [],

      cardState: false,
    };
  },
  created() {
    // 基本信息
    this.order_info();
  },
  methods: {
    // 基本信息
    order_info() {
      // this.loading = true;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id, type: 1 }
      );
      order_info(data).then((res) => {
        // this.loading = false;
        loading.close();
        if (res.errcode == 0) {
          console.log(res);
          this.info = res.data;
          res.data.logs.map((e) => {
          if (e.content) {
              e.content = JSON.parse(e.content);
            }
          });
          return;
          this.type = res.data.field;

          this.activity_type_list = res.data.activity_type_list;
          this.uid = res.data.info.uid;
          res.data.list.map((e) => {
            if (res.data.info.is_prior_payment == 0) {
              e.new_order_sn = e.order_offline_settlement.order_sn;
            }
            if (res.data.info.is_prior_payment == 1) {
              e.new_order_sn = e.order_sn;
            }
          });
          this.settlement_logs = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 拆分
    order_splitCate() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      order_splitCate(data).then((res) => {
        if (res.errcode == 0) {
          this.split_sh = res.data.category;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    split() {
      if (this.split_chec.length != 0) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(
                Object.assign(apiUrl().name, {
                  id: this.id,
                  cate: JSON.stringify(this.split_chec),
                })
              ) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          { id: this.id, cate: JSON.stringify(this.split_chec) }
        );
        order_split(data).then((res) => {
          if (res.errcode == 0) {
            this.$message({
              message: "拆分成功",
              type: "success",
            });
            this.split_chec = [];
            this.splitVisible = false;
            this.order_info();
          } else {
            this.$message.error(res.errmsg);
          }
        });
      } else {
        this.$message.error("请选择拆分分类");
      }
    },
    // 订单导出
    exportOrderiInfo() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          id: this.id,
        }
      );
      order_info_detail(data)
        .then((res) => {
          this.exportMethod(res, "订单详情");
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
    // 打印
    print() {
      let id = this.id;
      let uid = this.uid;
      this.$refs.printTemplate.$emit("demo", {
        id: id,
        uid: uid,
        type: "order",
      });
    },
    // 退货
    quit() {
      let uid = this.info.info.uid;
      let id = this.info.info.id;
      let return_status = this.info.info.return_status;
      if (return_status == 2) {
        this.$message.warning("订单已全部退货，无法再继续退货！");
        return;
      }
      this.$router.push({
        name: "order_return_add",
        params: { uid: uid, id: id, return_status: return_status },
      });
    },
    // 完成
    successClick() {
      this.$confirm("确认订单用户已完成签收?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(
                  Object.assign(apiUrl().name, { id: this.id, status: 3 })
                ) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id: this.id, status: 3 }
          );
          order_setOrderStatus(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "确认成功",
                type: "success",
              });
              this.order_info();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 页面设置
    determine() {
      let arry = [];
      this.Header.map((e) => {
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      this.field_save(arry);
    },
    recovery() {
      this.field_save([
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
      ]);
    },
    field_save(arry) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 6 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 6, fields: JSON.stringify(arry) }
        // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.order_info();
          this.mainor_ex = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 表单合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        switch (index) {
          case 0:
            sums[index] = "合计";
            break;
          case 3:
            sums[index] = this.total.order;
            break;
          case 4:
            sums[index] = this.total.send;
            break;
          case 5:
            sums[index] = this.total.real_num;
            break;
          case 10:
            sums[index] = this.total.real_money;
            break;
        }
      });
      return sums;
    },
    // 结算单号复制
    handleCopy(row) {
      if (!row.new_order_sn) {
        return;
      }
      copyToClipboard(row.new_order_sn); // 需要复制的文本内容
      this.$message.success(`${row.new_order_sn},复制成功！`);
    },

    openCard() {
      this.cardState = true;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  position: relative;
  top: 0;

  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }

  .mainor_ex {
    position: fixed;
    width: 220px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);

    &.on {
      transform: translate3d(0, 0, 0);
    }

    .mainor_exb {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;

      h3 {
        font-size: $font_16;
        color: $colour_18;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid $colour_e6;
        padding-left: 20px;
      }

      .mainor_exb_an {
        padding-left: 20px;
        margin-top: 15px;

        /deep/.el-checkbox {
          display: block;
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
    }

    .mainor_exb_b {
      position: absolute;
      bottom: 0;
      width: 100%;
      border-top: 1px solid $colour_e6;
      height: 55px;
      text-align: center;

      /deep/.el-button--default {
        margin-top: 12px;
        border-color: $subActive;
        color: $menuText;

        &:hover {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }
}

.type1 {
  color: #03a98e;
}

.type2 {
  color: red;
}

/deep/.settlement .el-table tr {
  .set_default {
    display: none;
    margin-left: 10px;
  }
}

/deep/.settlement .el-table tr:hover {
  .set_default {
    display: inline-block;
    cursor: pointer;
  }
}

/deep/ .settlement .el-table--small td .cell {
  display: flex;
  align-items: center;
  height: auto;
}

.active1 {
  // 满减
  color: #118ab2;
}

.active2 {
  // 满赠
  color: #03a98e;
}

.active3 {
  // 特卖
  color: #aacd6e;
}

.active4 {
  // 积分
  color: #073b4c;
}

.active5 {
  // 曾品
  color: #f56c6c;
}
</style>
